<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>


.dark {
            color: white;
            background-color: black;
            height: 100%;
        }
        .light {
            color: black;
            background-color: #fff;
            height: 100%;
        }
        html {
            height: 100%;
        }
        body {
            height: 100%;
        }
    </style>

<div class="dark">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab mollitia accusantium neque soluta rerum ipsa aperiam nulla laboriosam impedit eius similique exercitationem magni, dolor molestiae blanditiis illum. Porro, laudantium similique?
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis harum laborum officia? Assumenda repudiandae nam vero laboriosam optio culpa, commodi fuga aspernatur magnam ipsum possimus maiores provident error placeat porro.
</div>
    <script>
        let div = document.querySelector('div');
        div.onclick = function() {
            if(div.className == 'dark') {
                div.className = 'light';
            } else if(div.className == 'light') {
                div.className = 'dark';
            }
               
        }
    </script>
</body>
</html>